<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/personalinfo.css" />
<script src="js/jquery-1.11.3.min.js"></script>
<script>
	$(function(){
		$(".updatebtn").click(function(){
			if($(this).parents(".content-item").find(".user").is(":visible")){
				
				$(this).parents(".content-item").find(".user").hide();
				$(this).parents(".content-item").find(".update").show();
			}else{
			
				$(this).parents(".content-item").find(".user").show();
				$(this).parents(".content-item").find(".update").hide();
			}
			
		})
		$(".save").click(function(){
			var _this=$(this);
			if(_this.attr("field")=='user_name'){
			$.ajax({
				url:'userinfoupdate',
				data:{user_name:_this.parents(".update").find("input").val()},
				type:'get',
				success:function(data){
					alert("修改成功");
				}
			
			})
			}
			if(_this.attr("field")=='user_password'){
				$.ajax({
					url:'userinfoupdate',
					data:{user_password:_this.parents(".update").find("input").val()},
					type:'get',
					success:function(data){
						alert("修改成功");
					}
				
				})
				}
			if(_this.attr("field")=='user_phone'){
				$.ajax({
					url:'userinfoupdate',
					data:{user_phone:_this.parents(".update").find("input").val()},
					type:'get',
					success:function(data){
						alert("修改成功");
					}
				
				})
				}
			if(_this.attr("field")=='user_word'){
				$.ajax({
					url:'userinfoupdate',
					data:{user_word:_this.parents(".update").find("textarea").val()},
					type:'get',
					success:function(data){
						alert("修改成功");
					}
				
				})
				}
		})
		
	})
</script>
<title>Insert title here</title>
<style>
	.content-wrap{
		width:600px;
		margin-left:50px;
	}
	.content-item h3{
		font-size:15px;
		font-weight:bold;
		border-bottom: 1px solid #BFD1EB;
		padding-bottom:6px;
	}
	.content-item-info{
		padding-top:6px;
		color:#666;
		font-size:14px;
	}
	.content-item{
		margin-top:30px;
	}
</style>
</head>
<body>
	<div class="content-wrap">
		<ul class="content-ul">
			<li class="content-item">
				<h3>
					<div class="fr"><a href="javascript:void(0)" class="updatebtn">修改</a></div>
					登陆用户名
				</h3>
				<div class="content-item-info">
				<div class="show-info" >
					<span class="fr">${user.user_name }</span>
					<div><p class="user">你的登陆用户名</p>
						<div class="update"  style="display:none;">
							新用户名:<input type="text">4-30个字符<br/>
							<button class="save" style="margin-top:6px;" field="user_name">保存</button>
							<button class="cancel" style="margin-top:6px;">取消</button>
						</div>
					</div>
				</div>
			
				</div>
			</li>
			<li class="content-item">
				<h3>
					<div class="fr"><a href="javascript:void(0)" class="updatebtn">修改</a></div>
					登陆密码
				</h3>
				<div class="content-item-info">
				<div class="show-info" >
					<span class="fr">${user.user_password }</span>
					<div><p class="user">登陆密码</p>
						<div class="update"  style="display:none;">
							新密码:<input type="text">4-30个字符<br/>
							<button class="save" style="margin-top:6px;" field="user_password">保存</button>
							<button class="cancel" style="margin-top:6px;">取消</button>
						</div>
					</div>
				</div>
			
				</div>
			</li>
			<li class="content-item">
				<h3>
					<div class="fr"><a href="javascript:void(0)" class="updatebtn">修改</a></div>
					用户电话
				</h3>
				<div class="content-item-info">
				<div class="show-info" >
					<span class="fr">${user.user_phone}</span>
					<div><p class="user">用户电话</p>
						<div class="update"  style="display:none;">
							新电话:<input type="text">4-30个字符<br/>
							<button class="save" style="margin-top:6px;" field="user_phone">保存</button>
							<button class="cancel" style="margin-top:6px;">取消</button>
						</div>
					</div>
				</div>
			
				</div>
			</li>
			
			<li class="content-item">
				<h3>
					<div class="fr"><a href="javascript:void(0)" class="updatebtn">修改</a></div>
					人生格言
				</h3>
				<div class="content-item-info">
				<div class="show-info" >
					<span class="fr">${user.user_word }</span>
					<div><p class="user">人生格言</p>
						<div class="update"  style="display:none;">
							人生格言:<textarea rows="3" cols="20">4-30个字符</textarea><br/>
							<button class="save" style="margin-top:6px;" field="user_word">保存</button>
							<button class="cancel" style="margin-top:6px;">取消</button>
						</div>
					</div>
				</div>
				</div>
			</li>
			
			
		</ul>
	</div>
</body>
</html>